<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='申请退款'></uni-nav-bar> -->
		<view class="paying">
			退货中...
		</view>
		<view class="order-list">
			<view class="orderitem">
				<view class="top">
					<text>订单编号:{{id}}</text>
					<text class="status">{{status}}</text>
				</view>
				<view class="con" v-for="con in datalist.orderItems" :key='con.id'>
					<image :src="con.productPic" mode=""></image>
					<view class="info">
						<view class="left">
							<view class="title">{{con.productName}}</view>
							<view class="">编号: 123456789</view>
							<view class="">规格: 暂无</view>
							<view class="color">颜色: {{JSON.parse(con.productAttr)[0].value ? JSON.parse(con.productAttr)[0].value : '暂无'}}</view>
						</view>
						<view class="left right">
							<view class="price">￥{{con.productPrice}}</view>
							<view class="count">X{{con.productQuantity}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>时间:{{createTime}}</text>
					<text>合计: ￥{{totalAmount}}</text>
				</view>
			</view>
		</view>
		<view class="form">
			<form @submit="formSubmit">
				<view class="item uni-form-item uni-column">
					<view class="title">退单金额</view>
					<view style="line-height: 80rpx;color: red;font-size: 32rpx;" class="con">￥: {{totalAmount}}</view>
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">退货原因</view>
					<input class="uni-input" name="reason" placeholder="输入退款原因" />
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">退货地址</view>
					<picker style="line-height: 80rpx;" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input picker">{{array[index]}}</view>
					</picker>
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">详细理由</view>
					<textarea name='account' placeholder="请输入详细理由" />
					</view>
				<view class="upload">
					<view class="pointout">
						上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
					</view>
					
					<view class="images">
						<view  v-for="(item,index) in imgList"  class="image">
							<image :src="item" mode=""></image>
							<uni-icons @click='delimage(index)' class="icon" style="color: red;"  type="clear" size="20"></uni-icons>
						</view>
						
						
						<view @click="uploadImg" class="upimage">
							<uni-icons type="plusempty"  size="30"></uni-icons>
							<view class="">上传图片</view>
						</view>
					</view>
				</view>
				<button form-type="submit" style="width: 670rpx;background-color: #eee;" type="default" >提交</button>
			</form>

		</view>

		
	</view>
</template>

<script>
	import{getPreOrderById}from "../../../api/my/order/order.js"
	import {
		payConfirm
	} from "../../../api/my/waitpay/waitpay.js"
	import{addOrderReturnApply,getCompanyAddrss,orderReturnApplys,uploadImg,orderReturn} from "../../../api/my/backgoods/backgoods.js"
	import datalist from '../../../data/data.js'
	import baseUrl from "@/api/baseUrl.js"
	export default {
		data() {
			return {
				datalist: '',
				array:[],
				index:1,
				addresslist:'',
				status:'已发货',
				id:'',
				createTime:'',
				totalAmount:"",
				imgList:[],
				imageslist:[]
			};
		},
		methods: {
			// 点击小图标删除上传的图片
			delimage(index){
				this.imgList.splice(index,1)
			},
			// 上传图片
			orderReturn(){

			},
			// 选择图片
			uploadImg(){
				var _this = this;
				uni.chooseImage({
					success(res){
						console.log(res);
						if(res.tempFiles.length > 3){
							uni.showToast({
								title:"图片上传个数不能超过3张"
							})
							return
						}
						if(_this.imgList.length + res.tempFiles.length> 3){
							uni.showToast({
								title:"图片选择总个数不能超过三张"
							})
							return
						}
						var result = res.tempFiles.find(ele =>{
							// 10
							if(ele.size >1024*1024){
								return ele
							}
						});
						if(result){ /// 
							uni.showToast({
								title:"上传的图片大小超出了1m的限制"
							})
							return 
						}
						_this.imgList.push(...res.tempFilePaths);
					}
				})
					
			},
			// 切换收货地址
			bindPickerChange(e){
				console.log(e.detail.value);
				this.index=e.detail.value
			},
			// 提交
			formSubmit(e){
				var arr=[];
				this.imgList.forEach(ele=>{
					var pro=new Promise((resolve,rejected)=>{
						uni.showLoading({
							title:"加载中"
						})
						uni.uploadFile({
							url:'http://leju.bufan.cloud/lejuClient/orderReturn/uploadImg',
							filePath:ele,
							name:'file',
							success(res){
								resolve(res)
								console.log(res);
							},
							fail(res){
								rejected(res)
							}
						})
					})
					arr.push(pro)
				})
						console.log(this.imageslist);
				
				console.log(e.detail.value);
				var value = e.detail.value		
				Promise.all(arr).then(res=>{
					console.log(res);
					uni.hideLoading()
					res.forEach(el=>{
						console.log(JSON.parse(el.data));
						this.imageslist.push(JSON.parse(el.data).data.fileUrl)
					})
				}).then(
				addOrderReturnApply({
				  "companyAddressId": this.addresslist[this.index].id,
				  "count": '1',
				  "description": value.account,
				  "orderId": this.datalist.orderBase.id,
				  "orderItemId": this.datalist.orderItems[0].id,
				  "proofPics": JSON.stringify(this.imageslist),
				  "reason": value.reason,
				}).then(res=>{
					console.log(res);
					if(res.success){
						uni.showToast({
								title: "提交成功"
							})
						setTimeout(function() {
							uni.navigateBack()
						}, 1700)
				}
				}))
				


			}
		},
		onLoad(e) {
			console.log(e);
			this.id=e.id
			// 获取订单信息
			getPreOrderById(e.id).then(res=>{
				console.log(res);
				this.datalist =res.data
				this.totalAmount=res.data.orderBase.totalAmount
				this.createTime=res.data.orderBase.createTime
			})
			// 获取退货公司地址
			getCompanyAddrss().then(res=>{
				console.log(res);
				this.addresslist=res.data.items
				res.data.items.forEach(el=>{
					this.array.push(el.city+el.province+el.region+el.detailAddress+el.addressName)
				})
			})

		}
	}
</script>

<style lang="scss" scoped>
	.picker{
		padding-right: 20rpx;
		color: #666;
		width: 500rpx;
		text-align: right;
		overflow: hidden;
		text-overflow:ellipsis; 
		white-space: nowrap;
	}
	button {
		width: 710rpx;
		margin: 20rpx auto;
		margin-bottom: 60rpx;
		background-color: #fff;		box-sizing: border-box;
	}

	.form {
		width: 710rpx;
		margin:  20rpx auto;
		border-radius: 12rpx;
			background-color: #fff;		box-sizing: border-box;
			padding: 40rpx 0;
		.item {
			width: 710rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
				font-size: 26rpx;		box-sizing: border-box;
			margin: 20rpx auto;

			.title {
				width: 200rpx;
				line-height: 80rpx;		box-sizing: border-box;
				
			}

			input {
				font-size: 26rpx;
				text-indent: 20rpx;
				width: 600rpx;
				height: 80rpx;
				border: 2rpx solid #eee;		box-sizing: border-box;
				border-radius: 12rpx;
			}
			textarea{
				font-size: 26rpx;
				border: 2rpx solid #eee;
				padding: 20rpx;		box-sizing: border-box;
				border-radius: 12rpx;
			}
		}
	}

	.paying {
		width: 710rpx;
		margin: 0rpx auto;
		margin-bottom: 20rpx;
		margin: 20rpx;		box-sizing: border-box;
		text-indent: 20rpx;
		border-bottom: 2rpx solid #e5e5e5;
		background-color: #fff;
		border-radius: 12rpx;
		line-height: 106rpx;
	}

	.orderitem {
		width: 710rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;		box-sizing: border-box;
		margin: 40rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #eee;		box-sizing: border-box;
			font-size: 24rpx;
			color: #3e3e3e;

			.status {
				color: #034c46;		box-sizing: border-box;
			}
		}

		.con {
			padding: 30rpx 0;
			display: flex;		box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;		box-sizing: border-box;
			}

			.info {
				width: 460rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.left {
					font-size: 22rpx;
					box-sizing: border-box;
					line-height: 30rpx;
					color: #8d8d8d;

					.title {
						width: 300rpx;
						font-size: 26rpx;
						color: #3e3e3e;
						line-height: 58rpx;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.right {
					text-align: right;		box-sizing: border-box;
					.price {
						margin-top: 20rpx;
						font-size: 28rpx;
						box-sizing: border-box;
						color: #ff6700;
					}
					
					.count {
						margin-top: 10rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			line-height: 36rpx;		box-sizing: border-box;
		}

		.btns {
			padding: 12rpx 0;		box-sizing: border-box;
			height: 80rpx;

			.btn {
				height: 54rpx;
				line-height: 50rpx;
				float: right;
				margin-left: 20rpx;		box-sizing: border-box;
				font-size: 24rpx;
				border: 2rpx solid #2d4f43;
				color: #2d4f43;
				background-color: rgba(0, 0, 0, 0);
			}
		}

	}
.upload{
	box-sizing: border-box;
	width: 670rpx;
	height: 300rpx;
	margin: 20rpx auto;
	border: 2rpx solid #eee;
	padding: 40rpx;
	border-radius: 12rpx;
	.pointout{
		font-size: 24rpx;
	}
	.images{
		margin-top: 40rpx;
			.upimage{
		width: 120rpx;
		height: 120rpx;
			text-align: center;
		font-size: 24rpx;
		border: 2rpx solid #eee;
		float: left;
	}
	.image{
		width: 120rpx;
		height: 120rpx;
		position: relative;
		float: left;
		margin-right: 34rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			float: left;
			
		}
		.icon{
			position: absolute;
			top: -25rpx;
			right: -25rpx;
		}
		
	}
	}

}
	.orderitem {
		margin-top: 20rpx;		box-sizing: border-box;
	}
</style>
